<template>
  <div>
    <van-nav-bar left-arrow title="地图找房" @click-left="$router.go(-1)" />
    <div id="container"></div>
  </div>
</template>
<script>
export default {
  name: 'map-page',
  mounted() {
    const map = new window.BMapGL.Map('container')
    const point = new window.BMapGL.Point(116.404, 39.915)
    map.centerAndZoom(point, 15)
    const content = 'label'
    const label = new window.MapGL.Label(content, {
      position: point, // 设置标注的地理位置
      offset: new window.BMapGL.Size(10, 20) // 设置标注的偏移量
    })
    map.addOverlay(label)
    label.setStyle({
      // 设置label的样式
      color: '#000',
      fontSize: '30px',
      border: '2px solid #1E90FF'
    })
    label.addEventListener('click', function () {
      alert('您点击了标注')
    })
  },
  components: {},
  props: {},
  data() {
    return {}
  },
  computed: {},
  watch: {},
  created() {},
  methods: {}
}
</script>

<style scoped lang="less">
#container {
  width: 100vw;
  height: 100vh;
}
/deep/.van-nav-bar {
  position: fixed;
  left: 0;
  top: 0;
  width: 100%;
  height: 50px;
  z-index: 4;
}
</style>
